<!doctype html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Tendências de Faturamento - Análises</title>
		<%@ include file="head.jsp" %>
		<script type="text/javascript" src="resources/js/highcharts.js"></script>
		<script type="text/javascript" src="resources/js/exporting.js"></script>
		
		<script type="text/javascript">
		
		   function converteFloatMoeda(valor){
			      var inteiro = null, decimal = null, c = null, j = null;
			      var aux = new Array();
			      valor = ""+valor;
			      c = valor.indexOf(".",0);
			      //encontrou o ponto na string
			      if(c > 0){
			         //separa as partes em inteiro e decimal
			         inteiro = valor.substring(0,c);
			         decimal = valor.substring(c+1,valor.length);
			      }else{
			         inteiro = valor;
			      }
			       
			      //pega a parte inteiro de 3 em 3 partes
			      for (j = inteiro.length, c = 0; j > 0; j-=3, c++){
			         aux[c]=inteiro.substring(j-3,j);
			      }
			       
			      //percorre a string acrescentando os pontos
			      inteiro = "";
			      for(c = aux.length-1; c >= 0; c--){
			         inteiro += aux[c]+'.';
			      }
			      //retirando o ultimo ponto e finalizando a parte inteiro
			       
			      inteiro = inteiro.substring(0,inteiro.length-1);
			       
			      decimal = parseInt(decimal);
			      if(isNaN(decimal)){
			    	  valor = inteiro;
			      }else{
			         decimal = ""+decimal;
			         if(decimal.length === 1){
			            decimal = decimal+"0";
			         } 
			       	 if(decimal.length > 2){
			        	 decimal = decimal.substring(0,2);
			         }
			      	 valor = inteiro+","+decimal;
			      }
			      
			      return valor;
			}	
			
		   function formatarValorY( valor ){
            
			   if( valor < 0 ){
				   return "-"+formatarValorY(valor*-1);
			   }
			   if( valor < 1000 ){
				   return converteFloatMoeda(valor);
			   }
			   else if( valor < 1000000 ){
					valor = valor / 1000.00;
					valor.toFixed(2);
		        	return converteFloatMoeda(valor) +' Mil';
			   }
			   else {
				    var texto = valor == 1000000 ? ' Milhão' : ' Milhões';
					valor = valor / 1000000.00;
					valor.toFixed(2);
		        	return converteFloatMoeda(valor) + texto;
			   }
		   }
		
		
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 150,
                marginBottom: 25
            },
            title: {
                text: 'Análise de Tendências de Faturamento - <c:out value="${anoAtual}"/>',
                x: -20 //center
            },
            subtitle: {
                text: '<c:if test="${entidadeSelected == null }">Todas Entidades</c:if><c:if test="${entidadeSelected != null }">${entidadeSelected.nome}</c:if>',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
                    'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
            },
            yAxis: {
                title: {
                    text: 'Faturamento (R$)'
                },
                labels: {
                    formatter: function() {
                        return formatarValorY(this.value);
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': R$ '+ converteFloatMoeda(this.y);
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [
            {
                name: 'Tendências',
                data: <c:out value="${tendenciaDeFaturamento}"/>
            },{
            	name: 'Ameaças',
                data: <c:out value="${tendenciaDeAmeaca}"/>
            },{
            	name: 'Investimentos',
                data: <c:out value="${tendenciaDeInvestimento}"/>
            }, {
                name: 'Faturamento Real',
                data: <c:out value="${faturamentoReal}"/>
            },{
            	name: 'Metas',
                data: <c:out value="${previsaoManual}"/>
            }]
        });
    });
    
});
		</script>
		
		<script type="text/javascript">
		
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-35513738-1']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();
		
		</script>
				
	</head>
<body>
	<%@ include file="menu.jsp" %>

    <div class="container-fluid">
    	<div class="row-fluid">
    	
    		<select onchange="window.location.href='analise/'+ document.getElementById('ano').value +'/' +this.value;">
    			<option value="-1">Todas Entidades</option>
    			<c:forEach items="${entidades}" var="entidade">
    				<option 
    					<c:if test="${ entidadeSelected != null && entidade.id == entidadeSelected.id }">selected="selected"</c:if> 
    					value="${entidade.id}">${entidade.nome}</option>
    			</c:forEach>
    		</select>
    	
			<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
			
			<br/>
			
			<div style="display: inline; float: left; text-align: left;"><a href="analise/${anoAtual-1}/<c:if test="${entidadeSelected != null}">${entidadeSelected.id}</c:if>"/>&lt;&lt;&nbsp;${anoAtual-1}</a></div>
			<div style="display: inline; text-align: right; float: right"><a href="analise/${anoAtual+1}/<c:if test="${entidadeSelected != null}">${entidadeSelected.id}</c:if>"/>${anoAtual+1}&nbsp;&gt;&gt;</a></div>

			<input type="hidden" name="ano" id="ano" value="${anoAtual}"/> 
			
			<br/>
			
		</div>
		<%@ include file="rodape.jsp" %>
	</div>
</body>
</html>